<template>
  <div class="matlab-img">
    <div class="img-dialog">
      <el-dialog
        v-dialogDrag
        title=""
        :close-on-click-modal="false"
        :visible="$store.state.matlab.isShowMatlabImg[id]"
        :modal="false"
        class="dialog-test"
        @close="hide"
      >
        <PlotWrapper :json="$store.state.matlab.matlabImgJson[id]" />
        <div id="tool">
          <el-button @click="openEdit">进入编辑</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="editor-dialog">
      <el-dialog v-dialog-drag title="图片编辑" :visible="isEdit" custom-class="plotWindow" @close="isEdit=false">
        <chart-editor :json="$store.state.matlab.matlabImgJson[id]" />
      </el-dialog>
    </div>
  </div>
</template>

<script>

/**
 * 可拖动弹窗组件
 */
import PlotWrapper from '../PlotWrapper.vue';
import ChartEditor from '@/components/ChartEditor';
export default {
  components: {
    PlotWrapper,
    ChartEditor
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isEdit: false
    };
  },
  mounted() {
    console.log('test' + this.id);
  },
  methods: {
    hide() {
      this.$store.commit('matlab/closeMatlabImg', { id: this.id });
    },
    openEdit() {
      this.isEdit = true;
    }
  }
};
</script>

<style lang="scss" scoped>
img {
  width: 80%;
}

.content {
  position: relative;
  max-height: calc(90vh - 110px);
  overflow: auto;
}
#tool{
  width: 100%;
  display:flex;
  justify-content: flex-end;
}
</style>

<style lang="scss">
.plotWindow {
  width: 1050px;
}

.matlab-img {
  .img-dialog {
    .el-dialog {
      user-select: none;
      pointer-events: auto;
      width: 800px;
      .el-dialog__body {
        padding-top: 0;
      }
    }
  }
  .editor-dialog {
    .el-dialog {
      user-select: none;
      pointer-events: auto;
      width: 1200px;
      .el-dialog__body {
        padding-top: 0;
        padding: 10px 0px 0px 0px;
      }
    }
  }
}
</style>
